<template>
  <div class="bbscard">
    <div class="card-title">
      <div class="big">{{ cardTitle }}</div>
      <div class="small" :v-if="more">更多</div>
    </div>
    <div class="card-content">
      <div class="card-item" v-for="item of itemLists" :key="item.id">
        <div class="item-img">
          <img :src="item.imgUrl" alt="游戏图片" />
        </div>
        <div class="item-desc">
          <div class="desc-title">{{ item.itemTitle }}</div>
          <div class="desc-subtitle">{{ item.itemDesc }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "bbs_card",
  props: {
    cardTitle: String,
    more: Boolean,
    itemLists: Array,
  },
};
</script>
<style lang="scss" scoped>
.bbscard {
  margin-bottom: 0.2rem;
  margin-top: 1px;
  border-radius: 3%;
  box-shadow: 0 1px 8px #ddd;
  background: white;
  padding: 0.4rem;
  .card-title {
    .big {
      font-size: $titleFontSize;
    }
    .small {
      color: $themeColor;
    }
    display: flex;
    justify-content: space-between;
  }
  .card-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .card-item {
      margin-top: 0.24rem;
      display: flex;
      .item-img img {
        width: 0.9rem;
        height: 0.9rem;
      }
      .item-desc {
        margin-left: 0.24rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .desc-title {
          @include ellipsis;
          width: 1.42rem;
          font-size: $titleFontSizeUnActive;
          font-weight: 700;
        }
        .desc-subtitle {
          font-weight: 80;
          width: 1.42rem;
          color: $fontGrayColor;
          @include ellipsis;
          margin-top: 0.16rem;
        }
      }
    }
  }
}
</style>